<template>
    <div class="disinfection">
        <div class="section-wrap">
            <div class="form-section">
                <div class="form-item form-item-style1 form-break">
                    <div class="label-title">
                        <label>单位名称</label>
                    </div>
                    <div class="label-container">
                        <!-- <input type="text"
                                class="longinp"
                               v-model="params.DeptName"
                               disabled="isDisable"> -->
                        <div class="label-div"><a href="javascript:;"><em>{{params.DeptName}}</em></a></div>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>消毒人员</label>
                    </div>
                    <div>
                        <input type="text"
                               v-model="params.DisinfectUserName"
                               disabled="isDisable">
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>消毒区域</label>
                    </div>
                    <div>
                        <input type="text"
                                class="longinp"
                               v-model="params.AreaName"
                               disabled="isDisable">
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>记录人员</label>
                    </div>
                    <input type="text"
                                class="longinp"
                               v-model="params.CreateUserName"
                               disabled="isDisable">
                    <!-- <group>
                        <popup-picker :data="list1"
                                      v-model="CreateUserName"
                                      placeholder="请选择"
                                      @on-change="selectPerson"></popup-picker>
                    </group> -->
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>消毒时间</label>
                    </div>
                    <input type="text"
                               v-model="params.DisinfectTime"
                               disabled="isDisable">
                    <!-- <group>
                        <datetime v-model="minuteListValue" format="YYYY-MM-DD HH:mm" :minute-list="['00', '15', '30', '45']" @on-change="changeTime"></datetime>
                    </group> -->
                </div>   
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>备注</label>
                    </div>
                    <div>
                        <textarea class="areainfo"
                                style="resize: none;min-height:70px;"
                                v-model="params.Remark"
                                :disabled="isDisable"></textarea>
                    </div>
                </div>  
                <div class="form-section">
                    <div class="fjtit">
                        附件
                    </div>
                    <div style="margin-top: 10px;" class="div_p">
                        <!-- <img class="previewer-demo-img" v-for="(item, index) in imgList" :key="index" :src="item.FilePath
" width="100" @click="show(index)">
                        <div v-transfer-dom>
                            <previewer :list="previewImgList" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
                        </div> -->
                        <div class="upload-wrap">
                            <upload v-if="previewImgs.length>0"
                                    :imgList="previewImgs"></upload>
                            <strong v-else
                                    class="no-img">暂无图片</strong>
                        </div>
                    </div>
                </div>

                <div class="btns" v-if="!isDisable">
                    <button class="blue"
                            @click="handleSubmit('submit')">提交</button>
                </div>
            </div>
        </div>
        <myMenu></myMenu>
    </div>
</template>
<script>
import { XSwitch, Group, Cell, Previewer, TransferDom} from 'vux'
import myMenu from '@/commonComponents/menu'
import http from '../../../axios/public'
import upload from '@commonComponents/upload/index'
export default {
    components: {
        Previewer,
        myMenu,
        upload
    },
    directives: {
        TransferDom
    },
    data() {
        return {
            userInfo: {},
            isCanEdit: true, // 是否可以编辑
            params: {},
            list1: [],
            CreateUserName: 'bbb',//记录人员
            minuteListValue: this.getdatenew(),
            title: 'haha',
            isDisable: true,
            imgList: [],
            previewImgList: [],
            previewImgs: [],//图片路径集合
            options: {
                getThumbBoundsFn (index) {
                    let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
                    let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                    let rect = thumbnail.getBoundingClientRect()
                    return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
                }
            }
        }
    },
    created() {
        this.$vux.loading.show({
            text: '加载中...'
        })
        // 获取用户信息，判断是否有操作权限
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.$axiosAjax.GetIsManager({
            userNo: this.userInfo.userId
        }).then(res => {
            if (res.status == 200) {
                if (res.data.code == 1) {
                    this.isCanEdit = true
                } else {
                    this.isCanEdit = false
                }
            }
        })
    },
    mounted () {
        this.getData()
    },
    methods: {
       //初始化获取数据
        getData () {
            let that = this
            let param = {
                id: this.$route.query.disinfectId || this.getQuery().id
            }
            http.fetchPost('/api/Disinfect/GetDetail',param).then((res) => {
                // console.log(res)
                if (res.data.code === 0) {
                    that.params = res.data.data
                    var transImgList = res.data.data.Files
                    var ImgObj = {}
                    that.imgList = res.data.data.Files                  
                    if(transImgList.length > 0){
                        for(var i in transImgList){
                            ImgObj = Object.assign({},ImgObj,{
                                msrc: transImgList[i].FilePath,
                                src: transImgList[i].FilePath
                            })
                            that.previewImgList.push(ImgObj)
                            that.previewImgs.push(transImgList[i].FilePath)
                        }
                    }
                    that.$set(that.params,'DeptName',that.unescape(that.params.DeptName))
                    if(that.params.DisinfectTime&&that.params.DisinfectTime.length>0){
                        this.$set(that.params,'DisinfectTime',that.params.DisinfectTime.substr(0,16))
                    }  
                    this.$vux.loading.hide()
                }else {
                    this.$vux.toast.text(res.data.info)
                }
            }).finally(() => {
                this.$vux.loading.hide()
            })
        },
        //特殊字符转化
        unescape(html) {
            return html
                .replace(html ? /&(?!#?\w+;)/g : /&/g, '&amp;')
                .replace(/&lt;/g, '<')
                .replace(/&gt;/g, '>')
                .replace(/&quot;/g, '"')
                .replace(/%23/g, '#')
        },
        //获取当前日期、时间
        getdatenew() {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minute >= 0 && minute <= 9) {
                minute = "0" + minute;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate + ' ' + hour + ':' + minute;
            return currentdate;
        },
        preview (filePath) {
            if (this.regImg.test(filePath)) {
                this.$router.push({
                    path: '/previewImg',
                    query: {
                        previewImg: filePath
                    }
                })
            } else {
                wx.miniProgram.navigateTo({
                    url: `/pages/openDocument/index?filePath=${filePath}`
                })
            }
        },
        handleSubmit() {
            this.params.ImagesFiles = []
            this.ImagesFiles.forEach(item => {
                this.params.ImagesFiles.push(item.url)
            })
        },
        selectPerson() {
            let param = {
                allowPaging: true,
                data: {
                }
            }
        },
        changeTime() {
            
        },
        show (index) {
            this.$refs.previewer.show(index)
        },
        logIndexChange (arg) {
            console.log(arg)
        },
    }
}
</script>
<style scoped>
.fjtit{
    font-size: 14px;
    margin-left: 20px;   
    line-height: 40px; 
}
</style>
<style lang="less">
.div_p{
    font-size: 14px;
    color: #999;
    margin-left: 20px;
    .previewer-demo-img{
        width: 50px;
        height: 50px;
        border-radius: 5px;
        margin-right: 20px;
    }
    .weui-cell{
        width: 100px;
        float: left;
        margin-left: 60px;
        .vux-radio-label{
            color: #999;
        }
    }
}
.disinfection{
    .areainfo{
        color: #666;
    }
}
.form-item-style1.form-break{
    height: auto;
    line-height: auto;
}
.label-container a{display:inline-block;text-align:center}
.label-div{
    width: 250px;
    font-size: 14px;
    text-align: right;
    word-break: break-all;
    line-height: 20px;
}
.label-div em{
    position:relative;
    font-style:normal;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    color: #999;
}

</style>